<template>
    <Card :class="{'navigation':true,'navigation-show':nav.navigationShow,'navigation-float':nav.navigationFloat}" v-bind="{title:'导航'}">
        <Icon size="24" slot="extra" type="md-arrow-dropdown" :style="{color:nav.navigationFloat?'black':'blue'}" @click="nav.navigationFloat=false"/>
        <slot></slot>
    </Card>
</template>

<script>
export default {
  name:'starCardNav',
  components: {},
  data() {
    return {
    };
  },
  props: {
    nav:{
        default:()=>{
            return {
                navigationShow:false,
                navigationFloat:false,
            }
        }
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="scss">
.navigation {
  display: block;
  position: relative;
  width:300px;
  height:100%;
  z-index: 99;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  ::v-deep .ivu-card-body {
    height:calc(100% - 51px);
  }
}
.navigation-float {
  position: absolute;
}
.navigation-show {
  display: none;
}
</style>